<template>
  <div class="cd" :style="style" :class="{ choose: isChoose }">
    <img class="pic" :src="'./imgs/handmah_' + (Number(txt) + 11) + '.png'" />
    <div class="txt">{{ txt }}</div>
    <div class="pid">{{ pid }}</div>
    <div class="idx">{{ idx }}</div>
    <div class="ani" v-if="isChoose">
      <Effect></Effect>
    </div>
  </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js';
import Effect from './effect.vue';

export default {
  components: { Effect },
  // props: ['txt', 'size', 'height', 'col'],
  data: () => {
    return {
      id: '',
      pid: 0,
      col: 0,
      txt: '',
      height: 0,
      size: { x: 0, y: 0 },
      coords: { y: 0 },
      moveDistance: 0,
      playTimer: 0,
      color: "#fff",
      isChoose: false,
      idx: "",
      // style: {
      //   width: 0,
      //   height: 0,
      //   transform: 'translate3d(0, 0, 0)',
      //   background: '#fff'
      // }
    }
  },
  created() {
    // this.style = {
    //   width: this.size.x + 'px',
    //   height: this.size.y + 'px',
    //   transform: 'translate3d(0, ' + this.coords.y + 'px, 0)',
    //   background: this.color
    // }
  },
  computed: {
    style() {
      return {
        width: this.size.x + 'px',
        height: this.size.y + 'px',
        transform: 'translate3d(0, ' + this.coords.y + 'px, 0)',
        background: this.color
      }
    }
  },
  methods: {
    run() {
      anime({
        targets: this.coords,
        y: this.coords.y + this.moveDistance,
        duration: this.playTimer,
        easing: 'easeInOutSine',
        // easings: 'linear',
        update: () => {
          // this.style.transform = 'translate3d(0, ' + this.coords.y + 'px, 0)';
        }
      })

    },
    setListIdx() {
      if (this.coords.y > -10 && this.coords.y < this.height) {
        this.idx = Math.round(this.coords.y / this.size.y) + 7 * this.col;
      }
      else {
        this.idx = '-1'
      }

    },
    choose(v) {
      // this.style.background = v ? "#ff3300" : this.color
      this.isChoose = v;
    },
    setId(v) {
      this.id = v;
    },
    setPid(v) {
      this.pid = v;
    },
    setPosition(y) {
      this.coords.y = y;
      this.style.transform = 'translate3d(0, ' + this.coords.y + 'px, 0)';
      this.choose(false);
    },
    setColor(v) {
      this.color = v;
      this.style.background = v;
    },
    setMoveDistance(v) {
      this.moveDistance = v;
    },
    setPlayTimer(v) {
      this.playTimer = v;
    },
    setSize(v) {
      this.size = v;
    },
    setCol(v) {
      this.col = v;
    },
    setHeight(v) {
      this.height = v;
    },
    setTxt(v) {
      this.txt = v;
    }
  },

}
</script>

<style scoped>
.cd {
  color: #000;
  border: solid 1px #999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
}

.pid {
  position: absolute;
  right: 4px;
  top: 4px;
  font: 12px;
  color: #999;
  z-index: 2;
  transform: scale(0.7);
}

.idx {
  position: absolute;
  left: 4px;
  top: 4px;
  font: 12px;
  color: #d40707;
  z-index: 2;
  transform: scale(0.7);
}

.txt {
  position: absolute;
  left: 4px;
  bottom: 0px;
  font: 12px;
  color: #111fe6;
  z-index: 2;
  transform: scale(0.8);
}

.ani {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.pic {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.choose {
  box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.8);
}
</style>